<template>
    <div>
        <div class="search-content">
            <el-form ref="searchForm" :inline="true" :model="searchContent">
                <el-form-item label="消息类型：" prop="supplier_product_id">
                    <el-select v-model="searchContent.type" placeholder="请选择消息类型">
                        <el-option key="1" label="消息" value="1"></el-option>
                        <el-option key="2" label="公告" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发送时间：" prop="store_id">
                    <el-date-picker
                        v-model="searchContent.time"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="timestamp"
                        :default-time="['00:00:00', '23:59:59']"
                    ></el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="primary" @click="resetSearchData">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="search-list">
            <el-table :data="goodsList" border :height="oHeight" :fit="true">
                <el-table-column align="center" fixed="left" type="index" label="序号" width="80"></el-table-column>
                <el-table-column
                    align="center"
                    prop="createTime"
                    label="发送时间"
                    :show-overflow-tooltip="true"
                >
                    <template
                        slot-scope="scope"
                    >{{scope.row.createTime*1000|dateFormatter('YYYY-MM-DD HH:mm') }}</template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="type"
                    label="消息类型"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">{{scope.row.type==='1'?"消息":"公告"}}</template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="title"
                    label="内容"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column align="center" label="详情" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span style="color:#5790bb;" class="cursorPoint" @click="show_source(scope.row)">查看</span>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    align="center"
                    prop="isInitiative"
                    label="操作"
                    min-width="120"
                    #default="{row}"
                >
                    <div style="color: #5790bb" class="cursorPoint">
                        <span v-if="row.deleteTime>0" @click="showContent('edit',row)">编辑</span>
                        <span v-else @click="delContent(row)">撤回</span>
                    </div>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group">
                    <el-button type="primary" class="btn-bottom" @click="showContent('add')">新增</el-button>
                    <!-- <el-button type="primary" class="btn-bottom" @click="expertData">导出检索数据</el-button> -->
                </div>
                <!--分页部分-->
                <div class="paginationOne">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="searchContent.currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="searchContent.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total*1"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <el-dialog :title="currentRow.title" :visible.sync="dialogVisible" width="30%">
            <div v-html="currentRow.content"></div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <edit-drawer ref="editDrawer"></edit-drawer>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import editDrawer from './show-edit-drawer';
import { dateFormatter, objScreen } from "@/common/js/util";
export default {
    components: { editDrawer },
    data() {
        return {
            goodsList: [],
            oHeight: 800,
            searchContent: {
                currentPage: 1,
                pageSize: localStorage.getItem('pageSize') * 1 || 10,
                type: '',
                time: ''
            },
            searchObj: {},
			total: 0,
			dialogVisible:false,
			currentRow:''
        };
    },
    created() {
        this.getListData();
    },
    methods: {
		show_source(row){
			this.currentRow = row;
			this.getItemDetail(row.noticeId);
			this.dialogVisible=true;
		},
		getItemDetail(id) {
            this.$http.get(`/admin/im/index.php?act=notice&op=content&noticeId=${id}`).then(res => {
                if(res.code==1){
					this.currentRow = res.data;
				}
            }).catch(err => {
                this._message('error', err);
            })
        },
        showContent(type, row) {
            if (type === 'add') {
                this.$refs.editDrawer.show_dialog_fn('add', row)
            } else {
                this.$refs.editDrawer.show_dialog_fn('edit', row)
            }

        },
        delContent({ noticeId ,type}) {
            this.$http.get(`/admin/im/index.php?act=notice&op=cancel&noticeId=${noticeId}&msgType=${type}`,).then(res => {
                if (res.code === 1) {
                    this.$message.success(res.msg);
                    this.getListData();
                } else if (res) {
                    this.$message.error(res.msg);
                }
            }).catch(err => {
                this.$message.error(err);
            })
        },
        changeStatus(row, status) {
            this.$http.post("/admin/dataService/index.php?act=merchantSet&op=updateContractStatus", {
                ID: row.ID,
                status
            }).then(res => {
                if (res.code === 1) {
                    row.ContractStatus = status;
                    this.$message.success(res.msg);
                } else if (res) {
                    this.$message.error(res.msg);
                }
            }).catch(err => {
                this.$message.error(err);
            })
        },
        getListData() {
            var data = this.searchObj;
            data.page = this.searchContent.currentPage;
            data.pageSize = this.searchContent.pageSize;
            this.$http.get('/admin/im/index.php?act=notice&op=list', {
                params: data
            }).then((res) => {
                if (res.code === 1) {
                    this.total = res.data.totalCount;
                    this.goodsList = res.data.list;
                    // this._message('success', res.msg);
                    // this.getListData();
                } else {
                    this.total = 0;
                    this.goodsList = [];
                    this._message('error', res.msg);
                }
            }).catch(err => {
                this._message('error', err);
            })
        },
        search() {
            this.searchContent.currentPage = 1;
            let { type, time } = this.searchContent;
            var startTime, endTime
            if (this.searchContent.time) {
                startTime = time[0]
                endTime = time[1]
            }
            this.searchObj = objScreen({
                type,
                startTime: startTime ? parseInt(startTime / 1000) : '',
                endTime: endTime ? parseInt(endTime / 1000) : ''
            })
            this.getListData();
        },
        resetSearchData() {
            this.$refs['searchForm'].resetFields();
            this.searchObj = {};
            this.getListData();
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
            this.searchContent.pageSize = pageSize;
            this.searchContent.currentPage = 1;
            this.getListData();
        },
        handleCurrentChange(page) {
            this.searchContent.currentPage = page;
            this.getListData();
        },
    },
    mounted() {
        resize(this)
    },
};
</script>
<style lang="scss" scoped>
.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.search-content-input {
    width: 200px;
}
</style>